<template>

  <!--整个顶部内容块-->
  <div class="page_t">

    <!--左侧头像框-->
    <div style="height: 100%;width: 11%;float: left" :alt="thinkAloud.name" :title="thinkAloud.name">
      <el-avatar :size="135" v-if="thinkAloud" :src="thinkAloud.resouce"></el-avatar>
    </div>
    <!--中间主页对话框-->
    <div style="width: 75%;float: left;" :title="thinkAloud.name+'自言自语'">
      <div id="talkbubble" class="ui raised segment">
        <!--人物对话主体-->
        <div style="height: 70px;">
          <p>{{thinkAloud.content}}</p>
        </div>
        <!--换一条对话或更换人物-->
        <div style="height: 50px" >
          <div>
            <el-button type="info" icon="el-icon-refresh-left" style="float: right;margin-right: 50px" title="下一条" @click="getThinkAloud" circle></el-button>
            <el-button type="info" icon="el-icon-sort " style="float: left;margin-left: 20px" title="切换人物" @click="switchHumen" circle></el-button>
          </div>
        </div>
      </div>
    </div>

    <!--右侧导航栏，包含搜索，更换页面风格（列or方块），投票标签-->
    <div style="width: 14%;height:100%;float: right">
      <!--用户登陆以及显示块-->
      <div style="height:40px">
        <el-popconfirm v-if="user" confirm-button-text='登出' confirm-button-type="text" cancel-button-text='个人中心'
                       icon="el-icon-user-solid" :title="user.username" @confirm="logoOut" @cancel="userHome">
          <div slot="reference">
            <div v-if="user" style="height: 50px">
              <el-avatar :size="50" v-if="user" :src="user.image" :title="user.username"></el-avatar>
            </div>
          </div>
        </el-popconfirm>
        <div>
          <div @click="login" v-if="!user" style="color: #42b983;margin-top: 20px">登陆</div>
        </div>
      </div>
      <div>
        <div style="float: right;margin-top: 20px">
          <div style="height:30px">
            <div @click="flashQuery(drawer=true)" type="primary">搜索文章</div>
            <el-drawer
              title="默认搜索四方文章"
              :visible.sync="drawer"
              direction="ttb"
              size="150px"
            >
              <!--搜索框-->
              <div>
                <el-input id="query"
                  placeholder="搜索文章"
                  v-model="query.title"
                  style="width: 800px"
                  clearable>
                </el-input>
                <el-button id="enter" icon="el-icon-search" @click="queryArticle" circle></el-button>
              </div>
              <div>
                <el-radio v-model="type" :label="true">四方相关</el-radio>
                <el-radio v-model="type" :label="false">站长相关</el-radio>
              </div>
            </el-drawer>
          </div>
          <div style="height:30px" @click="goVote">
            <p>四方设定投票</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      user: null
    },
    data() {
      return {
        type: true,//默认搜索四方有关
        drawer: false,
        query: {
          title: '',
        },
        thinkAloud: {
          humen: 1,//默认搜索幻暗
          name: '',
          resouce: '',
          content: ''
        }
      }
    },
    methods: {
      //跳转投票界面
      goVote(){
        this.$router.push("/vote")
      },
      //清空搜索框并打开搜索困
      flashQuery(){
        this.query.title = '';
      },
      //搜搜文章
      queryArticle() {
        alert(this.query.title)
      },
      //打开搜索框
      open() {
        this.openMode = !this.openMode
      },
      //跳转个人中心
      userHome() {
        this.$router.push("/userhome")
      },
      //登出
      logoOut() {
        var token =sessionStorage.getItem("token");
        if (token){
          token = JSON.parse(token)
        }else {
          token = localStorage.getItem("token");
        }
        this.$http.post("/user/logout",token)
        sessionStorage.removeItem("user");
        sessionStorage.removeItem("token");
        localStorage.removeItem("user");
        localStorage.removeItem("token");
        this.$router.go(0);
      },
      //跳转登录
      login() {
        this.$router.push('/login');
      },
      //切换人物
      switchHumen() {
        this.$http.post('/thinkAloud/character')
          .then(result => {
            result = result.data;
            this.thinkAloud = result;
          })
      },
      //获取人物物语
      getThinkAloud() {
        //发送请求
        this.$http.post('/thinkAloud', this.thinkAloud)
          .then(result => {
            result = result.data;
            this.thinkAloud = result;
          })
      }
    },
    mounted() {
      //查询一句人物物语
      this.getThinkAloud();
    }
  }
</script>

<style scoped>

  #talkbubble {
    width: auto;
    height: 120px;
    margin-top: 1%;
    background: #cecece;
    position: relative;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 50px;
    margin-left: 2%;
  }

  #talkbubble:before {
    content: "";
    position: absolute;
    right: 100%;
    top: 40%;
    width: 0;
    height: 0;
    border-top: 13px solid transparent;
    border-right: 30px solid #a5a5a5;
    border-bottom: 13px solid transparent;
  }
</style>
